<template>
	<view class="u-page">
		<view class="content">
			<view class="projectList" v-if="lists.length>0">
				<block v-for="(item, index) in lists" :key="item.id">
					<view class="lists" @click="goPage('/pages/user/project/myProject?id='+item.pid)">
						<view class="images">
							<image :src="item.pic" mode=""></image>
						</view>
						<view class="list_contnet">
							<view class="projecttitle">{{item.title}}</view>
							<view class="projectinfo"> {{item.contentInfo}}</view>
							<view class="tags">
								<block v-for="(tag,index1) in item.tag" :key='index1'>
									<uni-tag class="tag" :text="tag" size="small" type="primary" circle="true">
									</uni-tag>
								</block>
							</view>
						</view>

					</view>
				</block>
			</view>

			<view class="nodData" v-else>
				您还没有发起项目
			</view>


		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				userData: {},
				lists: [],
			}
		},
		onLoad() {
			let user = uni.getStorageSync('userData');
			this.userData = user;
			this.project();
		},
		methods: {

			goPage(url) {
				console.log('11111')
				uni.navigateTo({
					url: url
				})

			},
			async project() {
				const project1 = await this.GQL({
					"operationName": "allSlProjects",
					"query": "query allSlProjects($filter: SlProjectFilter) { allSlProjects(filter: $filter) { nodes { title type tag status pic pid contentInfo uuid } } }",
					"variables": {
						"filter": {
							"status": {
								"equalTo": "1"
							},
							"uuid": {
								"equalTo": this.userData.uid
							}
						}
					}
				})
				if (project1.data.allSlProjects.nodes != '') {
					project1.data.allSlProjects.nodes.forEach(function(item, index) {
						if (item.tag) {
							item.tag = item.tag.split(',')
						}
					});
					this.lists = project1.data.allSlProjects.nodes
				}
			}
		}
	}
</script>

<style lang="scss">
	.u-page {
		background-color: #FBFCFE;
	}

	.content {
		.nodData {
			height: 60vh;
			// font-weight: 600;
			background-color: #FFFFFF;
			color: #aaaaaa;
			border-radius: 5px;
			box-shadow: 1px -2px 10px 6px rgba(0, 0, 0, 0.1);
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.projectList {
			background-color: #FFFFFF;
			border-radius: 5px;
			padding: 8px 16px;

			.lists {
				padding: 8px 0;
				padding-bottom: 12px;
				margin: 0;
				display: flex;
				border-bottom: 1px solid #EEEEEE;

				.list_contnet {
					margin-left: 5px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.projecttitle {
						width: 100%;
						height: 16px;
						overflow: hidden;
						font-size: 15px;
						font-weight: 400;
						color: #161E3E;
						line-height: 16px;
					}

					.projectinfo {
						font-size: 11px;
						font-weight: 400;
						color: #9BA7C1;
						line-height: 15px;
					}

					.tags {
						.tag {
							margin-right: 5px;
						}
					}
				}
			}

			.images {
				display: flex;
				align-items: center;
			}

			image {
				border-radius: 6px;
				width: 90px;
				height: 90px;
			}
		}
	}
</style>
